import React from 'react';
import { findDOMNode } from 'react-dom';
import _ from 'underscore';
import classnames from 'classnames';
import View from 'lib/View.jsx';
import Card from 'lib/components/card.jsx';
import GeoMapWidget from '../overview/GeoMapWidget2.jsx';
import RootViewScope from './RootViewScope.es6';
import ChartWidget from 'lib/components/ChartWidget.jsx';

let Top2Table = (props) => {
  return (
    <table className={classnames('table', props.className)}>
      <thead>
        <tr>
          {
            props.column.map((th, index) => {
              return (
                <th key={index} style={th.style}>{ th.title }</th>
              )
            })
          }
        </tr>
      </thead>
      <tbody>
        {
          props.store.map((item, index) => {
            return (
              <tr key={index}>
                <td>{ item.name }</td>
                <td className="text-middle" style={ item.percent === '--' ? props.style : null }>{ item.percent }</td>
                <td className="text-middle" style={ item.httpError === '--' ? props.style : null }>{ item.httpError }</td>
                <td className="text-middle" style={ item.networkError === '--' ? props.style : null }>{ item.networkError }</td>
              </tr>
            )
          })
        }
      </tbody>
    </table>
  );
};

class RootView extends View {

  constructor(props, context) {
    super(props, context);
    this.onResize = this.onResize.bind(this);

    this.$left = null;
    this.$right = null;
    this.$container = null;
    this.$chart = null;
  }

  componentDidMount() {
    super.componentDidMount();
    this.$left      = $(this.refs.left);
    this.$right     = $(this.refs.right);
    this.$container = $(this.refs.container);
    this.$chart1 = $(findDOMNode(this.refs.chart1));
    this.$chart2 = $(findDOMNode(this.refs.chart2));

    $(window).on('resize', this.onResize).trigger('resize');
  }

  onResize(event) {
    let leftContainerWidth = this.$left.width();

    if (leftContainerWidth === 495) {
      let finalWidth = this.$container.width() - leftContainerWidth;
      this.$right.css({
        width: finalWidth
      });
    } else {
      this.$right.removeAttr('style');
    }

    if ($(window).width() < 1280) {
      let style = {
        paddingLeft: '20%',
        paddingRight: '20%'
      };

      this.$chart1.css(style);
      this.$chart2.css(style);
    } else {
      this.$chart1.removeAttr('style');
      this.$chart2.removeAttr('style');
    }
  }

  render() {
    let chartSettings = {
      legend: {
        align: 'right',
        enabled: true,
        layout: 'vertical',
        verticalAlign: 'top',
        y: 70,
        x: this.state.right
      },
      plotOptions: {
        pie: {
          center: [this.state.left, null],
          dataLabels: {
            enabled: false
          },
          showInLegend: true
        }
      }
    };

    _.forEach(this.state.httpRequest, (chart) => {
      if (chart.data.series[0]) {
        chart.data.series[0].name = this.props.regexp;
      }
    });

    return (
      <div className="pure-g" ref="container">
        <div className="pure-u-1 pure-u-xl-1-3" ref="left">
          <div className="card" style={{marginTop: 56}}>
            <Card title="错误">
              <table className="table table-error">
                <thead>
                  <tr>
                    <th>HTTP错误率</th>
                    <th>网络错误率</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td style={{fontSize: 28}}>{ this.state.error.http }</td>
                    <td style={{fontSize: 28}}>{ this.state.error.network }</td>
                  </tr>
                </tbody>
              </table>
              <Card>
                <ChartWidget store={ this.state.error } />
              </Card>
            </Card>
            <Card title="运营商">
              <Top2Table className="table-carries" column={[
                  {
                    width: 80,
                    title: ''
                  },
                  {
                    title: '平均响应时间'
                  },
                  {
                    title: 'HTTP错误率'
                  },
                  {
                    title: '网络错误率'
                  }
                ]} store={ this.state.carries.top2 } />
              <Card ref="chart1">
                <ChartWidget chartType="pie" store={this.state.carries} chartSettings={chartSettings} />
              </Card>
            </Card>
            <Card title="操作系统">
              <Top2Table className="table-os" column={[
                  {
                    width: 80,
                    title: ''
                  },
                  {
                    title: '平均响应时间'
                  },
                  {
                    title: 'HTTP错误率'
                  },
                  {
                    title: '网络错误率'
                  }
                ]} store={ this.state.os.top2 } />
              <Card ref="chart2">
                <ChartWidget chartType="pie" store={this.state.os} chartSettings={chartSettings} />
              </Card>
            </Card>
          </div>
        </div>
        <div className="pure-u-1 pure-u-xl-2-3" ref="right">
          <div className="card">
            <Card title="网络请求">
              <table className="table table-network">
                <thead>
                  <tr>
                    <th>平均响应时间</th>
                    <th>传输数据量</th>
                    <th>吞吐量</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td className="text-large">{ this.state.httpRequest.chart0.value }</td>
                    <td className="text-large">{ this.state.httpRequest.chart1.value }</td>
                    <td className="text-large">{ this.state.httpRequest.chart2.value }</td>
                  </tr>
                </tbody>
              </table>
              <Card title="平均响应时间趋势图">
                <ChartWidget height={187} store={this.state.httpRequest.chart0} />
              </Card>
              <Card title="传输数据量趋势图">
                <ChartWidget height={188} store={this.state.httpRequest.chart1} />
              </Card>
              <Card title="吞吐量趋势图">
                <ChartWidget height={188} store={this.state.httpRequest.chart2} />
              </Card>
            </Card>
            <Card title="HTTP响应时间地域分布">
              <div className="geo-map-chart">
                <GeoMapWidget store={this.state.geo} legend={{
                  align:'right',
                  layout:'vertical'
                }} onPointClick={() => {
                  // 点击之后跳转至 geo 模块
                  let url = location.href.split('#/').shift();
                  location.href = url.replace(/\/([a-zA-Z0-9-.])+$/, '/geo');
                }} allowOverlap={false} chart={{
                  height: 400
                }} />
              </div>
            </Card>
          </div>
        </div>
      </div>
    );
  }
}

RootView.defaultProps = {
  Scope: RootViewScope
};

export default RootView;
